import React, { useState } from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import http from '@/services/request';
import { Space, Button, Select } from 'antd';
import { Input } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons';

const { Option } = Select;

const { Search } = Input;

/* 搜索区域 */
// 这是高级检索的搜索配置项，一般要和你的表格的列关联
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '申请人姓名',
    name: 'applicantName',
    placeholder: '请输入请输入申请人姓名'
  },
  // {
  //   type: 'input' as Itype,
  //   label: '司机联系电话',
  //   name: 'applicantName',
  //   placeholder: '请输入司机联系电话'
  // },
  {
    type: 'input' as Itype,
    label: '申请人联系电话',
    name: 'applicantPhone',
    placeholder: '请输入申请人联系电话	'
  },
  {
    type: 'input' as Itype,
    label: '申请原因',
    name: 'applicationReason',
    placeholder: '请输入申请原因'
  },
  {
    type: 'input' as Itype,
    label: '申请时间',
    name: 'applicationTime',
    placeholder: '请输入申请时间'
  },
  {
    type: 'input' as Itype,
    label: '开始驾驶时间',
    name: 'startDrivingTime',
    placeholder: '请输入开始驾驶时间'
  },
  {
    type: 'input' as Itype,
    label: '车牌号',
    name: 'licensePlateNumber',
    placeholder: '请输入车牌号'
  },

  {
    type: 'input' as Itype,
    label: '审批人名称',
    name: 'approverName',
    placeholder: '请输入审批人名称'
  },
  {
    type: 'input' as Itype,
    label: '审批人联系电话',
    name: 'approverPhone',
    placeholder: '请输入审批人联系电话'
  },
  {
    type: 'input' as Itype,
    label: '申请状态',
    name: 'dispatchApplicationStatus',
    placeholder: '请输入申请状态'
  },
  {
    type: 'input' as Itype,
    label: '	司机管理处id',
    name: 'driverManagementId',
    placeholder: '请输入司机管理处id'
  },
  {
    type: 'input' as Itype,
    label: '车库id',
    name: 'garageId',
    placeholder: '请输入车库id'
  },
  {
    type: 'input' as Itype,
    label: '	驳回原因',
    name: 'rejectReason',
    placeholder: '请输入驳回原因'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    name: 'remark',
    placeholder: '请输入备注'
  }
];

//高级检索
export const UseSearch = (props: any) => {
  return (
    <Space style={{ float: 'right' }}>
      {props.isMoreSearchShow ? (
        <Button
          type="link"
          size="large"
          onClick={() => {
            props.setisMoreSearchShow(false);
            props.setsearchMore(false);
          }}
        >
          收起
          <UpOutlined />
        </Button>
      ) : (
        <Button
          type="link"
          size="middle"
          onClick={() => {
            props.setisMoreSearchShow(true);
            props.setsearchMore(true);
          }}
        >
          高级检索
          <RightOutlined style={{ marginLeft: '1px' }} />
        </Button>
      )}
    </Space>
  );
};

// 这里是模糊查询 根据xxx进行查询
export const SearchSelector = (props: any) => {
  const [searchid, setsearchid]: any = useState('driverName');
  return (
    <div
      style={{
        display: 'inline-block',
        width: '380px',
        marginBottom: 10,
        marginRight: 10,
        float: 'right'
      }}
    >
      <Select
        defaultValue={Options[1].label}
        style={{ width: 100 }}
        defaultActiveFirstOption
        onSelect={(value: string, option: any) => {
          setsearchid(option.key);
        }}
      >
        {Options.map((i) => (
          <Option value={i.label} key={i.value} children={null} />
        ))}
      </Select>
      <Search
        placeholder="请输入您要查的数据"
        onSearch={(e) => {
          // console.log(e);
          // console.log(searchid);
          if (e.trim() === '') {
            http.get('/zk/applicationLogistics/get/1/10').then((res) => {
              props.dataSource(res.data.records);
            });
            return;
          }
          switch (searchid) {
            case 'applicantName': {
              http(`/zk/applicationLogistics/list/applicantName/${e}`).then(
                (res) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            case 'applicantPhone': {
              http(`/zk/applicationLogistics/list/applicantPhone/${e}`).then(
                (res) => {
                  props.dataSource(res.data);
                }
              );
              break;
            }
            case 'licensePlateNumber': {
              http(`/zk/applicationLogistics/get/licensePlateNumber/${e}`).then(
                (res) => {
                  props.dataSource(res.data);
              
                }
              );
              break;
            }
            default: {
              break;
            }
          }
        }}
        style={{ width: '280px' }}
        enterButton
      />
    </div>
  );
};
export const Searchdow = () => {
  return;
};

const Options = [
  { label: '申请人姓名', value: 'applicantName', onClick: (e: any) => {} },
  { label: '申请人联系电话', value: 'applicantPhone', onClick: (e: any) => {} },
  { label: '车牌号', value: 'licensePlateNumber', onClick: (e: any) => {} }
];

/* 表格区域 */

//复选框的接口
export interface DataType {
  id: number;
  key: React.Key;
  name: string;
  age: number;
  address: string;
}
